<template>
  <div class="container">
    <div ref="line_ref" class="linechart"></div>
    <div ref="pie_ref" class="piechart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      area: [
        { year: [20513, 53440, 4211] },
        { year: [20544, 53370, 4155] },
        { year: [20472, 53405, 4110] },
        { year: [20320, 52907, 4398] },
        { year: [20197, 52452, 4437] },
      ],
      land: ["耕地", "林地", "草地"],
      days: [
        1, 9, 17, 25, 33, 41, 49, 57, 65, 73, 81, 89, 97, 105, 113, 121, 129,
        137, 145, 153, 161, 169, 177, 185, 193, 201, 209, 217, 225, 233, 241,
        249, 257, 265, 273, 281, 289, 297, 305, 313, 321, 329, 337, 345, 353,
        361,
      ],
      gengdiData: [
        4.2702, 5.2598, 5.7499, 9.3975, 4.8327, 8.8695, 8.59, 10.15, 8.61,
        9.3222, 13.9944, 11.89, 13.6, 16.62, 13.423, 15.6144, 17.0181, 15.6115,
        19.5773, 15.6704, 20.3175, 22.4222, 21.9319, 19.5265, 14.6931, 13.8348,
        14.3791, 16.7181, 14.5655, 16.019, 18.6, 19.1933, 20.8044, 19.6,
        22.7587, 24.3117, 21.5, 15.2288, 13.2941, 15.5219, 11.2382, 15.1174,
        8.3422, 6.152, 5.6356, 4.3792,
      ],
      lindiData: [
        7.4065, 11.31658, 14.07552, 12.09523, 16.6609, 18.06928, 15.71107,
        14.41, 18.4, 15.87632, 18.46038, 16.65994, 18.26096, 19.44368, 20.68838,
        22.09584, 17.31261, 18.00835, 21.86278, 22.64979, 15.00554, 19.9871,
        18.4, 22.33683, 25.58378, 24.68762, 22.59558, 18.89005, 20.8, 24.73494,
        19.93773, 20.22365, 23.09926, 18.99168, 25.07619, 14.55498, 13.26496,
        18.83658, 18.4, 18.26675, 14.79936, 16.06166, 16.4328, 11.28307,
        10.15107, 5.3967,
      ],
      caodiData: [
        8.1886, 10.961, 12.9058, 9.5568, 11.8491, 14.8605, 9.2592, 14.65, 13.87,
        10.7376, 16.06, 15.97, 14.93, 16.85, 19.2, 18.64, 20.63, 22.07, 18.94,
        19.01, 16.4478, 18.69, 14.31, 15.3284, 16.1405, 16.5876, 15.0811,
        13.5398, 14.7905, 15.8553, 14.4373, 18.5245, 20.7902, 17.724, 19.6003,
        16.93, 14.3, 11.0142, 14.4485, 12.1075, 11.1723, 14.8018, 12.5633,
        8.506, 10.0873, 5.575,
      ],
      linechartInstance: null,
      piechartInstance: null,
    };
  },
  mounted() {
    this.linechart()
    this.piechart()
  },
    beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    piechart() {
      const areaPercentage = this.getPercentage(this.area[0].year);
      this.piechartInstance = this.$echarts.init(this.$refs.pie_ref);
      const option = {
        title: {
          text: `植被面积占比`,
          top: "2%",
          left: "center",
          textStyle:{
            color:'#fff',
            fontSize:"18px",
            fontFamily:'华文楷体',
          }
        },
        legend: {
          bottom: "-1%",
          right: "15%",
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(16,12,42,0.9)",
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#161522",
            },
          },
        },
        series: [
          {
            name: "面积占比%",
            type: "pie",
            center: ["47%", "50%"],
            radius: [50, 90],
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
            },
            data: [
              { value: areaPercentage[0], name: "耕地" },
              { value: areaPercentage[2], name: "草地" },
              { value: areaPercentage[1], name: "林地" },
            ],
          },
        ],
      };
      this.piechartInstance.setOption(option);
    },
    linechart() {
      // const gdData = this.getEveryTwo(this.gengdiData);
      // const ldData = this.getEveryTwo(this.lindiData);
      // const cdData = this.getEveryTwo(this.caodiData);
      this.linechartInstance = this.$echarts.init(this.$refs.line_ref);
      const option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center",
          text: "不同植被8d年内NPP变化",
          textStyle:{
            color:'#fff',
            fontSize:"18px",
            fontFamily:'华文楷体',
          }
        },
        xAxis: {
          type: "category",
          name:"天数d",
          namaeLocation:'middle',
          data:this.days
        },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            name:"耕地",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {},
            data: this.gengdiData,
          },
          {
            name:"林地",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {},
            data: this.lindiData,
          },
          {
            name:"草地",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {},
            data: this.caodiData,
          },
        ],
      };
      this.linechartInstance.setOption(option);
    },
    //计算占比函数
    getPercentage(arr) {
      //总面积
      let totalArea = 0;
      arr.forEach((item) => {
        totalArea += item;
      });
      //计算面积占比
      const areaPercentage = arr.map((item) =>
        ((item / totalArea) * 100).toFixed(1)
      );
      return areaPercentage;
    },
    getSum(arr) {
      const result = [];
      for (let i = 0; i < arr.length; i += 11) {
        const group = arr.slice(i, i + 11);
        const sum = group.reduce((acc, current) => acc + current, 0);
        result.push(sum);
      }
      return result;
    },
    getEveryTwo(arr) {
      const result = [];
      for (let i = 0; i < arr.length - 1; i += 2) {
        result.push(arr[i] + arr[i + 1]);
      }
      return result;
    },
        //销毁图表
    disposeChart() {
      // 安全销毁图表实例
      if (this.linechartInstance) {
        try {
          this.linechartInstance.dispose();
        } catch (error) {
          console.error("Error disposing bar chart:", error);
        } finally {
          this.linechartInstance = null;
        }
      }
       if (this.piechartInstance) {
        try {
          this.piechartInstance.dispose();
        } catch (error) {
          console.error("Error disposing bar chart:", error);
        } finally {
          this.piechartInstance = null;
        }
      }
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.linechart {
  width: 280px;
  height: 250px;
  flex: 0.5;
}
.piechart {
  width: 280px;
  height: 250px;
  flex: 0.5;
}
</style>